<template>
  <div>
    <div class="jd_layout">
      <div class="jd_banner">
        <ul class="jd_bannerimg clearfix">
          <li v-for="(item,index) in list" :key="index">
            <a href="javascript:;">
              <img :src="item.pic" alt="" />
            </a>
          </li>
        </ul>
        <!-- 点标记 -->
        <ul class="jd_bannerIndicator clearfix">
          <li></li>
          <li class="active"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <MusicLsit></MusicLsit>
  </div>
</template>

<script>
import 'base/slider/slider.css';
import {banner} from 'base/slider/slider.js';
// import api from 'api/api'
import {getSliderPics} from 'api/api'
import MusicLsit from "./MusicList"
import bannerJson from "./banner.json"

export default {
  components:{
    MusicLsit
  },
  data(){
    return {
      list:[]
    }
  },
  created(){
     getSliderPics(({data,status})=>{
       if(status==1){
          this.list=data
       }
       if(status==0){
         this.list=bannerJson.banners
       }
        setTimeout(()=>banner(),100)
      })
  }
};
</script>
